<script setup lang="ts">
import { Empty, showLoadingToast, closeToast } from "vant";
import { useI18n } from "vue-i18n";
import NoData from "@/image/new_img/activity/no_data.svg";
import { onMounted, ref } from "vue";
import { ActivityAxios } from "@/api";
import { UserStore } from "@/store";
import { ActReceiveVipListRes } from "@/types";
import moment from "moment";
const { t } = useI18n();
const userStore = UserStore();
onMounted(() => {
  if (userStore.isLogin) {
    getReceiveVip();
  }
});
const pageNo = ref(1);
const pageSize = ref(10);
const total = ref(0);
const vipList = ref<ActReceiveVipListRes[]>([]);
const inintType = ref(false);
//获取用户vip记录信息
const getReceiveVip = () => {
  showLoadingToast({
    message: "Loading...",
    forbidClick: true,
  });
  ActivityAxios.getVipRecord({ pageNo: pageNo.value, pageSize: pageSize.value })
    .then(res => {
      total.value = res.total;
      vipList.value = vipList.value.concat(res.list);
      inintType.value = true;
      closeToast();
    })
    .catch(() => {
      closeToast();
    });
};
//加载下页
const onLoad = () => {
  if (total.value === vipList.value.length && inintType.value) {
    return false;
  }
  pageNo.value = pageNo.value + 1;
  getReceiveVip();
};
</script>
<template>
  <div class="bonusList-frame">
    <div class="list-frame">
      <div class="list-title-frame df">
        <div class="text-tilte df ai-center jc-center">
          {{ t("activity.actVIP.registrationTitle") }}
        </div>
      </div>
      <div class="list-constent list-title">
        <div class="vipList-frame df ai-center jc-center">
          <div class="public-frame1 df ai-center jc-center">
            {{ t("activity.actVIP.collectionTime") }}
          </div>
          <div class="public-frame df ai-center jc-center">
            {{ t("activity.actVIP.event") }}
          </div>
          <div class="public-frame df ai-center jc-center">
            {{ t("activity.actVIP.money") }}
          </div>
        </div>
      </div>
      <div class="list-constent">
        <div
          class="vipList-frame df ai-center jc-center"
          v-for="(item, index) in vipList"
          :key="index"
        >
          <div class="public-frame1 df ai-center jc-center">
            {{ moment(item.createTime).format("YYYY-MM-DD HH:mm") }}
          </div>
          <div class="public-frame df ai-center jc-center">
            {{
              item.rewardType === 1
                ? t("activity.actVIP.upgradeRewards")
                : item.rewardType === 2
                ? t("activity.actVIP.weeklyRewards")
                : t("activity.actVIP.monthlyRewards")
            }}
          </div>
          <div class="public-frame df ai-center jc-center">
            {{ item.amountGrant / 100 }}
          </div>
        </div>
        <div class="noMore-frame">
          <span v-if="vipList.length < total && inintType" @click="onLoad">{{
            t("tip.loadMore")
          }}</span>
          <span v-if="vipList.length == total && inintType && total > 0">{{
            t("systemNotify.noMore")
          }}</span>
        </div>
      </div>
      <Empty
        v-if="vipList.length === 0"
        image-size="200"
        :image="NoData"
        :description="t('gameLog.noRecordYet')"
      />
    </div>
  </div>
</template>
<style lang="less" scoped>
.bonusList-frame {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  overflow: hidden;
  background-color: rgb(27, 10, 36);
}
.list-frame {
  width: calc(100% - 80px);
  height: auto;
  margin: auto;
  margin-top: 52px;
  .list-title-frame {
    width: 100%;
    height: 82px;
    border-radius: 38px 38px 0 0;
    overflow: hidden;
    background: #ffffff0a;

    .text-tilte {
      width: 100%;
      font-size: 28px;
      color: #ffffffa6;
      text-align: center;
      height: 82px;
      background: #24142d;
      margin: auto;
    }
  }
  .list-constent {
    width: 100%;
    height: auto;
    .vipList-frame {
      flex: 1;
      text-align: center;
      height: 82px;
      line-height: 82px;
      font-size: 28px;
      border-bottom: 1px solid #1b0a24;
      color: #ffffffa6;
      background-color: #24142d;
    }
    .public-frame {
      flex: 1;
      text-align: center;
      font-size: 28px;
      color: #ffffffa6;
    }
    .public-frame1 {
      width: 278px;
      text-align: center;
      font-size: 28px;
      color: #ffffffa6;
    }
  }
  .list-title {
    background-color: #2d1d35;
    .vipList-frame {
      background-color: #2d1d35;
    }
  }
}
.noMore-frame {
  font-size: 24px;
  height: 77px;
  line-height: 77px;
  text-align: center;
  font-size: 28px;
  color: #969799;
  margin-bottom: 40px;
}
</style>
